<template>
	<div class="flex flex-col h-full overflow-hidden">
		<div class="flex items-center justify-between py-2">
			<div>
				<el-space>
					<el-popover trigger="click" :width="450" placement="bottom-start">
						<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
							<el-form-item label="推送类型" prop="logType">
								<el-select class="w100" clearable v-model="state.queryForm.pushType" :teleported="false">
									<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in pushType" />
								</el-select>
							</el-form-item>
							<el-form-item label="推送时间" prop="createTime">
								<el-date-picker
									:teleported="false"
									:end-placeholder="$t('syslog.inputEndPlaceholderTip')"
									:start-placeholder="$t('syslog.inputStartPlaceholderTip')"
									range-separator="To"
									type="datetimerange"
									v-model="state.queryForm.createTime"
									value-format="YYYY-MM-DD HH:mm:ss"
								/>
							</el-form-item>
						</el-form>
						<template #reference>
							<el-button link type="primary"
								>高级搜索<el-icon><ArrowDown /></el-icon>
							</el-button>
						</template>
					</el-popover>
					<el-input placeholder="请输入IMEI" v-model="state.queryForm.imei" />
					<el-button type="primary" @click="getDataList(true)">查询</el-button>
				</el-space>
			</div>
		</div>
		<el-table
			ref="tableRef"
			:data="state.dataList"
			v-loading="state.loading"
			row-key="id"
			border
			:cell-style="tableStyle.cellStyle"
			:header-cell-style="tableStyle?.headerCellStyle"
			size="small"
		>
			<el-table-column label="序号" type="index" width="60" />
			<el-table-column label="推送类型" prop="pushName" show-overflow-tooltip />
			<el-table-column label="URL" prop="apiUrl" show-overflow-tooltip />
			<el-table-column label="IMEI" prop="imei" show-overflow-tooltip />
			<el-table-column label="发送内容" prop="content" show-overflow-tooltip />
			<el-table-column label="状态" prop="status" width="80">
				<template #default="{ row }">
					<el-tag :type="row.status === 2 ? 'success' : 'error'">{{ row.status === 2 ? '启用' : '禁用' }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="结果" prop="result" show-overflow-tooltip />
			<el-table-column label="时间" prop="createTime" show-overflow-tooltip />
		</el-table>
		<pagination :small="true" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination"> </pagination>
	</div>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { pushType } from '../data';
import { fetchList } from '/@/api/platform/basicOpenapi';
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: fetchList,
	queryForm: {
		pushType: '',
		createTime: '',
		imei: null,
	},
	descs: ['create_time'],
});
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
</script>

<style lang="scss" scoped></style>
